$(function () {
    // 需求1. 渲染商品信息和分页控件
    //全局变量: 当前页 currentPage 每页显示长度: pageSize
    var currentPage = 1;
    var pageSize = 2;
    //声明全局数组,保存上传图片的信息
    var picImgs = [];
    render();
    function render() {
        $.ajax({
            url: '/product/queryProductDetailList',
            type: 'get',
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: 'json',
            success: function (info) {
                console.log(info);
                //渲染商品信息
                $('tbody').html(template('tmp-product', info));
                //利用bootstrappagintor渲染分页控件
                $('.pag-product').bootstrapPaginator({
                    bootstrapMajorVersion: 3,//bootstrap的版本要求。
                    currentPage: currentPage,//当前的请求页面。
                    totalPages: Math.ceil(info.total / pageSize),//一共多少页。
                    numberOfPages: 5,//一页列出多少数据。
                    onPageClicked: function (event, originalEvent, type, page) {//点击页码时触发的事件
                        // 把当前点击的页码赋值给currentPage,渲染页面
                        currentPage = page
                        render()
                    }
                });
            }
        });
    }

    //需求二: 动态渲染模态框中二级分类数据
    $.ajax({
        url: '',
        type: '',
        data: {

        },
        dataType: 'json',
        success: function (info) {
            console.log(info);

        }
    });

    // 需要3: 利用jq的fireupload插件上传商品图片(如果选中图片大于3张,需要将最旧的那张删除)
    // 思路: 声明全局数组,保存图片的信息,在done事件中,往数组最前面添加图片信息,当数组的长度大于3时,删除数组中最后一个元素,和删除最后一张图片
    // 创建并添加img到pic-imgs标签中,最新添加的图片要在最前面
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {//后台保存图片成功会触发的事件
            // data.result.picAddr记录了图片的地址
            console.log(data);
            //添加图片信息到数组最前面
            picImgs.unshift(data.result);

            // 创建并添加img到pic-imgs标签中,最新添加的图片要在最前面
            $('#pic-imgs').prepend('<img src="' + data.result.picAddr + '" width="100px">');

            //当数组的长度大于3时,删除数组中最后一个元素,和删除最后一张图片
            if (picImgs.length > 3) {
                picImgs.pop();
                $('#pic-imgs img:last').remove()
                // console.log($('#pic-imgs img:last-of-type'));
            }
            console.log(picImgs);
            //更新字段(如果图片个数为3个,将状态改为正确的状态)
            if(picImgs.length == 3) {
                $("#form").data('bootstrapValidator').updateStatus('picArr', 'VALID')
            }

        }
    });

    //需求4: 二级分类下拉列表渲染
    $.ajax({
        url: '/category/querySecondCategoryPaging',
        type: 'get',
        data: {
            page: 1,
            pageSize: 10000
        },
        dataType: 'json',
        success: function (info) {
            console.log(info);
            $('.cate-menu').html(template('tmp-categorty', info));

        }
    });

    //需求5: 点击 二级分类下拉列表,将内容渲染在按钮上,并保存id到隐藏域中
    //  思路: 给cate-menu注册委托事件, 让其子元素去执行
    $('.cate-menu').on('click', 'li', function () {
        // 将内容渲染在按钮上
        $('.check-cate').text($(this).text());
        // 保存id到隐藏域中
        $('#categoryId').val($(this).data('id'));
        //更新状态
        $("#form").data('bootstrapValidator').updateStatus('categoryId', 'VALID')
    })

    //需求6: 校验模态框的数据规则
    $('#form').bootstrapValidator({
        excluded: [],//默认隐藏域是不参与验证的
        feedbackIcons: {//设置验证结果显示各种图标
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            categoryId: {
                validators: {
                    notEmpty: {
                        message: '请选择二级分类'
                    }
                }
            },
            proName: {
                validators: {
                    notEmpty: {
                        message: '请输入商品名称'
                    }
                }
            },
            proDesc: {
                validators: {
                    notEmpty: {
                        message: '请输入商品描述'
                    }
                }
            },
            num: {
                validators: {
                    notEmpty: {
                        message: '请输入商品库存'
                    },
                    regexp: {//不能以0开头
                        regexp: /^[1-9]\d*$/,
                        message: '库存必须是非0开头的数字'
                    }
                }
            },
            size: {
                validators: {
                    notEmpty: {
                        message: '请输入商品尺码'
                    },
                    regexp: {//xx-xx
                        regexp: /^\d{2}-\d{2}$/,
                        message: '尺码格式必须是xx-xx'
                    }
                }
            },
            oldPrice: {
                validators: {
                    notEmpty: {
                        message: '请输入商品原价'
                    }
                }
            },
            price: {
                validators: {
                    notEmpty: {
                        message: '请输入商品现价'
                    }
                }
            },
            picArr: {
                validators: {
                    notEmpty: {
                        message: '请上传3张图片'
                    }
                }
            }
        }
    });

    //需求7: 上传数据
    // 思路: -注册在表单验证成功的事件,在事件处理函数中,阻止submit默认行为,再发生ajax请求,提交数据,
    // 成功: 1.隐藏模态框, 2.渲染第一页数据, 3.重置表单项,4.恢复表单域以外的默认数据
    // 失败: 隐藏模态框

    $('#form').on('success.form.bv', function (e) {
        console.log(2);

        //阻止submit默认行为
        e.preventDefault();
        // - 获取表单基本数据- 拼接图片数据
        var params = $('#form').serialize();
        params += "&picName1=" + picImgs[0].picName + "&picAddr1=" + picImgs[0].picAddr;
        params += "&picName2=" + picImgs[1].picName + "&picAddr2=" + picImgs[1].picAddr;
        params += "&picName3=" + picImgs[2].picName + "&picAddr3=" + picImgs[2].picAddr;

        //发送请求
        $.ajax({
            url: '/product/addProduct',
            type: 'post',
            data: params,
            dataType: 'json',
            success: function (info) {
                console.log(info);
                // 成功: 1.隐藏模态框, 2.渲染第一页数据, 3.重置表单项,4.恢复表单域以外的默认数据
                if (info.success) {
                    // 1.隐藏模态框
                    $('#first-modal').modal('hide');
                    // 2.渲染第一页数据,
                    currentPage = 1;
                    render();
                    // 3.重置表单项
                    $('#form').data('bootstrapValidator').resetForm(true);
                    // 4.恢复表单域以外的默认数据
                    $('.check-cate').text('请选择二级分类');
                    $('#pic-imgs').children('img').remove();
                    //清空picImgs数组
                    picImgs = [];
                } else {
                    //失败:隐藏模态框
                    $('#first-modal').modal('hide');
                }
            }
        })
    });

});